items = document.querySelectorAll(".item");
container = document.querySelector(".container");
let i = 0;
let h = 0;
var layerY = window.innerHeight + document.documentElement.scrollTop;
items.forEach((item) => {
  h = i * 200 + 70 + i * 20;
  item.style.top = `${h}px`;
  i += 1;
  if (i % 2) {
    item.style.left = "-400px";
  } else {
    item.style.right = "-400px";
  }
});
h += 300;
container.style.height = `${h}px`;
i = 0;
items.forEach((item) => {
  i += 1;
  let top = parseInt(item.style.top.replace(/[^0-9]/g, ""));
  if (layerY - 200 > top) {
    if (i % 2) item.style.left = "calc(50vw - 200px)";
    else item.style.right = "calc(50vw - 215px)";
  } else {
    if (i % 2) {
      item.style.left = "-400px";
    } else {
      item.style.right = "-400px";
    }
  }
});
document.addEventListener("scroll", function (event) {
  layerY = window.innerHeight + document.documentElement.scrollTop;
  let i = 0;
  items.forEach((item) => {
    i += 1;
    let top = parseInt(item.style.top.replace(/[^0-9]/g, ""));
    if (layerY - 200 > top) {
      if (i % 2) item.style.left = "calc(50vw - 200px)";
      else item.style.right = "calc(50vw - 215px)";
    } else {
      if (i % 2) {
        item.style.left = "-400px";
      } else {
        item.style.right = "-400px";
      }
    }
  });
});
